<template>
	<div>
		<el-row>
			<el-col :span="17" class="">
				<div class="padding border-bottom flex justify-content-end align-items-center">
					<div>
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px">
							<el-form-item label="平台" class="m-0">
								<el-select v-model="ruleForm.region" placeholder="请选择平台">
									<el-option label="区域一" value="shanghai"></el-option>
									<el-option label="区域二" value="beijing"></el-option>
								</el-select>
							</el-form-item>
						</el-form>
					</div>
					<div class="p-l-10"><font-awesome-icon :icon="['fa', 'bolt']" class="text-blue" /></div>
					<div class="p-l-10"><font-awesome-icon :icon="['fa', 'volume-up']" class="text-blue" /></div>
					<div class="p-l-10"><font-awesome-icon :icon="['fa', 'envelope']" class="text-blue" /></div>
				</div>
				<el-row style="margin-top: 40px; margin-bottom: 40px;">
					<el-col :span="8" class="padding text-center">
						<font-awesome-icon :icon="['fas', 'key']" class="text-blue" style="font-size: 60px; margin-top:86px;" />
					</el-col>
					<el-col :span="8" class="padding" style="margin-top: 70px;">
						<h4>对称密钥</h4>
						<p>总数量：<span class="text-large">12,958</span></p>
					</el-col>
					<el-col :span="6" class="padding">
						<div class="flex justify-content-between align-items-end">
							<div>AES</div>
							<div><span class="text-blue text-large">4</span> 个</div>
						</div>
						<div class="flex justify-content-between align-items-end m-t-10">
							<div>SM4</div>
							<div><span class="text-blue text-large">131</span> 个</div>
						</div>
						<div class="flex justify-content-between align-items-end m-t-10">
							<div>AES</div>
							<div><span class="text-blue text-large">12,354</span> 个</div>
						</div>
						<hr class="border">
						<div class="flex justify-content-between align-items-end">
							<div>AES</div>
							<div><span class="text-blue text-large">0</span> 个</div>
						</div>
						<div class="flex justify-content-between align-items-end m-t-10">
							<div>AES</div>
							<div><span class="text-blue text-large">0</span> 个</div>
						</div>
					</el-col>
				</el-row>
				<hr class="border">
				<el-row style="margin-top: 40px;">
					<el-col :span="8" class="padding text-center">
						<font-awesome-icon :icon="['fas', 'key']" class="text-blue" style="font-size: 60px; margin-top:86px;" />
					</el-col>
					<el-col :span="8" class="padding" style="margin-top: 70px;">
						<h4>非对称密钥</h4>
						<p>总数量：<span class="text-large">12,958</span></p>
					</el-col>
					<el-col :span="6" class="padding">
						<div class="flex justify-content-between align-items-end">
							<div>AES</div>
							<div><span class="text-blue text-large">4</span> 个</div>
						</div>
						<div class="flex justify-content-between align-items-end m-t-10">
							<div>SM4</div>
							<div><span class="text-blue text-large">131</span> 个</div>
						</div>
						<div class="flex justify-content-between align-items-end m-t-10">
							<div>AES</div>
							<div><span class="text-blue text-large">12,354</span> 个</div>
						</div>
						<hr class="border">
						<div class="flex justify-content-between align-items-end">
							<div>AES</div>
							<div><span class="text-blue text-large">0</span> 个</div>
						</div>
						<div class="flex justify-content-between align-items-end m-t-10">
							<div>AES</div>
							<div><span class="text-blue text-large">0</span> 个</div>
						</div>
					</el-col>
				</el-row>
			</el-col>

			<el-col :span="7" class="padding border-left">
				<h4 class="title m-0">
					<font-awesome-icon :icon="['fas', 'exclamation-circle']" class="text-red" />
					告警列表
				</h4>
				<el-row>
					<el-col :span="10" class="padding">
						告警总数：
						<span class="text-red">123</span>
					</el-col>
					<el-col :span="7" class="padding">
						严重：
						<span class="text-yellow">123</span>
					</el-col>
					<el-col :span="7" class="padding">
						严重：
						<span class="text-yellow">123</span>
					</el-col>
				</el-row>
				<div class="text-center">
					<img src="../assets/img-01.png" width="50%" alt="">
					<div class="text-gray">暂无告警信息</div>
				</div>
				<hr class="border">
				<h4 class="title">应用服务TOP5</h4>
				<div style="height: 200px;">图表</div>
				<hr class="border">
				<h4 class="title">TSSC</h4>
				<div style="height: 200px;">图表</div>
				
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			ruleForm: {
				region: ''
			},
			rules: {
				region: [{ required: true, message: '请选择平台', trigger: 'change' }]
			}
		};
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
	height: 40px;
	line-height: 40px;
	color: #303133;
}

.text-large {
	font-size: 24px;
}
</style>
